<template>
  <el-dialog :visible.sync="innerVisible" :title="title" :width="width" append-to-body :close-on-click-modal="false">
    <div v-loading="loading" style="padding-right: 30px">
      <columns-form
        ref="form"
        :step-index.sync="stepIndex"
        v-model="value"
        :is-edit="isEdit"
        :group-id="groupId"
        :show-continue="showContinue"
        :label-width="labelWidth"
        :view-mode="viewMode"
        :disabled="submitting"
        :lang="lang"
        :columns="columns"
        @close="handleClose"
        @submit="handleSubmit"
        @submitAndContinue="submitAndContinue"
      />
    </div>
  </el-dialog>
</template>

<script>
import ColumnsForm from '@/framework/components/form/ColumnsForm'
import RouterUtil from '@/framework/infra/router/RouterUtil'
import TableButtonType from '@/framework/constant/TableButtonType'
import ButtonFuncTypeEnum from '@/framework/constant/ButtonFuncTypeEnum'
import {mapGetters} from 'vuex'

export default {
  name: 'DialogColumnsForm',
  components: {ColumnsForm},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    showContinue: {
      type: Boolean,
      default: false
    },
    labelWidth: {
      type: String,
      default: '140px'
    },
    viewMode: {
      type: Boolean,
      default: false
    },
    width: String,
    isEdit: {
      type: Boolean,
      default: false
    },
    groupId: {
      type: Number,
      default: 0
    },
    value: {
      type: Object,
      default() {
        return {}
      }
    },
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    title: {
      type: String,
      default: ''
    },
    // 顶部显示语言切换
    lang: {
      type: [Object, Boolean],
      default: false
    }
  },
  data() {
    return {
      showed: true,
      ButtonFuncTypeEnum,
      submitting: false,
      stepIndex: 0,
      innerVisible: this.visible
    }
  },
  computed: {
    ...mapGetters(['routes']),
    buttons() {
      return RouterUtil.getButtonsByFullPath(this.routes, this.$route.path, this.groupId) || []
    },
    formButtons() {
      return this.buttons.filter(el => el.type === TableButtonType.FORM)
    }
  },
  watch: {
    innerVisible() {
      if (!this.innerVisible) {
        this.stepIndex = 0
      }
      this.$emit('update:visible', this.innerVisible)
    },
    visible() {
      this.innerVisible = this.visible
    }
  },
  methods: {
    clearValidate() {
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate()
      })
    },
    handleClose() {
      this.$emit('update:visible', false)
    },
    handleSubmit(e) {
      if (this.viewMode) {
        this.innerVisible = false
        return
      }
      this.$emit('submit', e)
    },
    submitAndContinue(e) {
      if (this.viewMode) {
        this.innerVisible = false
        return
      }
      this.$emit('submitAndContinue', e)
    }
  }
}
</script>

